<template>
	<view class="bg-color-white flex flex-ai-center plr-12 ptb-10" style="border: 1rpx solid #EAEAEA;border-radius: 12rpx;">
		<w-icon :name="value? 'search3':'search3'" size="24"></w-icon>
		<input class="mlr-8 flex-1 font-size-16 font-color-black" @focus='eventFocus' @blur='eventBlur'
			:confirm-type='conformType' :disabled="disabled" :placeholder="placeholder" @input="eventInput" :focus='focus'
			@confirm='eventConfirm' v-model="val" type="text" />
		<w-icon name="close4" size="24" v-show="value" @click='clear'></w-icon>
	</view>
</template>

<script>
	export default {
		name: "w-search-input",
		props: {
			value: {
				type: String,
				default: null
			},
			placeholder: {
				type: String,
				default: "请输入搜索内容"
			},
			conformType: {
				type: String,
				default: "search"
			},
			focus: {
				type: Boolean,
				default: false
			},
			disabled:{
				type: Boolean,
				default: false
			}
		},
		model: {
			prop: 'value',
			event: "change"
		},
		computed: {
			val: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('change', v)
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			eventInput({
				detail
			}) {
				this.$emit('input', detail.value)
			},
			eventFocus() {
				this.$emit('focus')
			},
			eventBlur() {
				this.$emit('blur')
			},
			eventConfirm({
				detail
			}) {
				this.$emit('confirm', detail.value)
			},
			clear() {
				this.$emit('input', null)
				this.$emit('change', null)
			}
		}
	}
</script>

<style lang="scss">

</style>
